<template>

  <div class="recommend">
    <p>推荐歌单
      <img src="../../assets/icon/xiayige.png" class="xiayige">
    </p>
      <div class="recommend_b">
        <div class="recommend_item" v-for="(item,index) in todayArray" :key="index">
          <span class="recommend_span">
            <img :src="item.picUrl" class="today_left" alt="">
          </span>
          <span class="recommend-wz">
            {{item.name}}
          </span>
          <span class="erji">
          <img src="../../assets/icon/headset.png" alt="" class="Headset">
          {{item.playCount}}
        </span>
        </div>
      </div>
    </div>

</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'radio',
    data() {
      return {

      };
    },
    computed: {
      ...mapState(['todayArray'])
    },
    created() {
  /*    // eslint-disable-next-line no-unused-vars
      this.$http.get('http://localhost:3000/personalized?limit=6').then((res) => {
        console.log(res.data.result);
        this.todayArray = res.data.result;
        // eslint-disable-next-line no-unused-vars
      }).catch((res) => {});*/
    //api 统一管理
    this.$api.gettodayArray({limit:6})

    },
  };
</script>

<style scoped>
  .recommend{
    width: 100vw;
    height: 370px;
  }
  .recommend p{
    width: 100vw;
    height: 40px;
    font-size: 14px;
    font-weight: bold;
    line-height: 40px;
    text-indent: 5px;
    position: relative;
  }
  .recommend_b{
    width: 100vw;
    height: 330px;
  }
  .recommend_item{
    width: 31vw;
    height: 165px;
    float: left;
    margin-left: 1.5vw;
    position: relative;
  }
  .recommend-wz{
    display: block;
    font-size: 13px;
    width: 31vw;
    height: 33px;
    overflow: hidden;
  }
  .xiayige{
    display: inline-block;
    width: 14px;
    height: 14px;
    position: absolute;
    top: 21px;
    left:66px;
  }
  .recommend_span{
    display: block;
    width: 32vw;
    height: 130px;
  }
  img{
    width: inherit;
    height: inherit;
    object-fit: contain;
  }
  .erji{
    width: 55px;
    height: 20px;
    display: inline-block;
    position: absolute;
    top: 8px;
    left: 60px;
    color: #fff;
    font-size: 10px;
    text-indent: 18px;
  }
  .Headset{
    display: inline-block;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0px;
    left: 0px;
  }
</style>
